<template>
  <div class="main-container">
    <!-- tab部分 -->
    <div class="tab-info">
      <!-- <van-tabs v-model:active="state.active" shrink :line-height="0" :title-active-color="themeColors.textColorLightest"  swipeable :title-inactive-color="themeColors.textColorLightest">
        <van-tab v-for="(item, index) in state.tabList" :key="index" :title="item.title">
          <component :is="item.component"></component>
        </van-tab>
      </van-tabs> -->
      <assistant></assistant>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, shallowRef, watch } from "vue";
import { themeStore, ITheme } from "../../store/modules/theme";
import assistant from "./components/assistant.vue";
import aiSquare from "./components/aiSquare.vue"; // 假设这是AI广场的组件

const themeColors: ITheme = themeStore().theme;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

interface IState {
  active: string | number;
  tabList?: Array<{ title: string, component: any }>;
  userInfo: any;
}

const state: IState = reactive({
  active: 0,
  userInfo: null,
  tabList: [
    {
      title: "小助手",
      component: shallowRef(assistant)
    },
    {
      title: 'AI广场',
      component: shallowRef(aiSquare)
    }
  ]
});

// 初始化用户信息
onMounted(() => {
  const userInfo = localStorage.getItem('userInfo');
  state.userInfo = userInfo ? JSON.parse(userInfo) : { userName: '未登录' };
});

// 监听路由变化并更新激活的标签页
watch(
  () => proxy?.$route.fullPath,
  () => {
    const queryTab = proxy?.$route.query.tab;
    if (queryTab !== undefined) {
      state.active = Number(queryTab);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.main-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh; /* 确保容器高度为视口高度 */
}

.tab-info {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  // z-index: 99999;
  background-color:#f1f8fe; /* 设置背景颜色以便更好地看到效果 */
  padding: 10px 0; /* 根据需要调整内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影以增强视觉效果 */

  .van-tabs__nav {
    display: flex;
    justify-content: center;
    background: none;
    padding: 0;

    .van-tab {
      padding: 0;
      margin-left: 60px;
      color: v-bind("themeColors.textColorLightest");
      .van-tab__text {
        opacity: 0.6;
        font-size: 32px;
      }
      &:first-child {
        margin-left: 0;
      }
      &.van-tab--active {
        .van-tab__text {
          opacity: 1;
          font-size: 40px;
        }
      }
    }
  }
}


</style>